Vuetify：Google Contact

2019鐵人賽 ui vue vuetify javascript

Casio

2018-11-12 08:42:27

1302 瀏覽

分享至

https://codepen.io/hereiscasio/pen/dybLbVd?editors=1010

Used UI Component ( #3 )

#1 Navigation drawers, #2 List item groups, #3 Selection controls

UI 圖來源見此

Discussion

誠如之前所述，像這類的 Groups 元件，重點是關注一堆受控項的選取狀態：點擊漢堡圖標後，你會發現 "預設第一個 list item 保持選取狀態"，像這種需求，就要靠 Groups 中的元件幫你快速達成，因為我們只要在 v-list 內添加 <v-list-item-group v-model='selectedListItem'>，幾乎一行搞定！但你若不知道有這種好用元件存在，你可能還是會自幹，那就有點得不償失